<!--  -->
<script setup>
const props = defineProps({
  title: {
    type: String,
    default: '提示',
  },
  footer: {
    type: Boolean,
    default: true,
  },
  cancelText: {
    type: String,
    default: '取消',
  },
  confirmText: {
    type: String,
    default: '确定',
  },
  // 点击确认
  confirm: {
    type: Function,
    default: () => Promise.resolve(),
  },
})
const visible = defineModel({ type: Boolean, default: false })

const loading = ref(false)

const handleConfirm = async () => {
  loading.value = true
  await props.confirm().finally(() => {
    loading.value = false
  })
}
</script>

<template>
  <div @touchmove.stop.prevent="() => {}">
    <wd-popup v-model="visible" v-bind="$attrs" custom-style="background-color:transparent" :close-on-click-modal="false">
      <div class="rounded-xl p-4 w-600rpx bg-#fff flex flex-col gap-4">
        <div class="font-600 text-32rpx text-#333">
          {{ props.title }}
        </div>
        <slot />
        <div v-if="props.footer" class="flex justify-around">
          <wd-button type="info" @click="visible = false">
            {{ props.cancelText }}
          </wd-button>
          <wd-button :loading="loading" @click="handleConfirm">
            {{ loading ? '请求中' : props.confirmText }}
          </wd-button>
        </div>
      </div>
    </wd-popup>
  </div>
</template>

<style scoped lang='scss'>

</style>
